// 首先vue-router是vue的一个插件，是一个类，里面就会有install方法
let _Vue = null
export default class VueRouter {
  constructor(options) {
    // 初始接收options
    this.options = optinos
    // 定义一个routeMap对象用来存储路由规则
    this.routeMap = {}
    // 定义一个data对象具有响应式可以记录当前的路由地址
    this.data = _Vue.observable({
      current: this.initCurrentPath(options.mode)
    })
  }
  // install为类的静态方法
  static install (Vue) {
    // 判断vueRouter是否已经安装过，如果已经安装，则直接返回
    if (VueRouter.install.installed) return
    VueRouter.install.installed = true
    // 要将vue用全局变量进行接收
    _Vue = Vue
    // 将vueRouter中的router对象挂载到vue实例上
    _Vue.mixin({
      beforeCreate() {
        if (this.$options.router) {
        // 这样做的目的表示只将vueRouter实例对象挂载到全局vue的实例上去
          _Vue.prototype.$router = this.$options.router
          this.$options.init(Vue)
        }
      }
    })
  }
  // 创建routeMap对象的方法，将vuerouter中传入的routes转换成键值对存储到routeMap中去
  createRouteMap() {
    this.options.routes.forEach(route => {
      this.routeMap[route.path] = route.component
    })
  }
  // 根据不同 mode 初始化不同的路径
  initCurrentPath() {
    if (mode === 'history') {
      return window.location.pathname || '/'
    }
    // 默认 hash 模式(保证刷新还是当前组件)
    window.location.hash = window.location.hash ? window.location.hash : '#/'
    return window.location.hash ? window.location.hash.substr(1) : '#/'
  }
    // 创建router-link以及router-view组件
  initComponent(Vue) {
    const self = this
    Vue.component('router-link', {
      // 有个属性to是从父组件接收值过来
      props: { to: String },
      // 利用render函数渲染
      render(h) {
          return h('a',
            {
              // 有个属性href
              attrs: { href: this.to },
              // 注册一个点击事件
              on: { click: clickHandler }
            },
            [this.$slots.default]
          )
      },
      methods: {
        clickHandler(e) {
          if (self.options.mode === 'history') {
            this.clickHandlerHistory(e)
          } else {
            this.clickHandlerHash(e)
          }
        },
        clickHandlerHistory(e) {
          // 更新url
          history.pushState({}, '标题', this.to)
          // 更新vuerouter中的data.current
          this.$router.data.current = this.to
          // 阻止a标签点击事件的默认行为
          e.preventDefault()
        },
        clickHandlerHash(e) {
          // 将url中的hash更新为组件设置的路由
          window.location.hash = this.to
          e.preventDefault()
        }
      }
    })
    // 注册一个router-view的组件
    Vue.component('router-view', {
      // 渲染当前路由对应的组件
      render(h) {
        // 找出当前路径对应的组件
        const component = self.routeMap[self.data.current]
        return h(component)
      }
    })
  }

  // 监听popstate事件
  initEvent() {
    window.addEventListener('popstate', () => {
      his.data.current = window.location.pathname
    })
    window.addEventListener('hashchange', () => {
      const url = window.location.hash.substr(1)
      this.data.current = url
    })
  }
  init(Vue) {
    this.createRouteMap()
    this.initEvent()
    this.initComponent(Vue)
  }
}